<template>
  <div name="contact" class="contact-panel q-gutter-sm q-pa-sm column">
    <contact-item
      v-for="item in contacts"
      :key="item.title"
      :title="item.title"
      :icon="item.icon"
      :content="item.content"
      :link="item.link"
    />
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import ContactItem from './ContactItem.vue';
@Component({
  name: 'contact-panel',
  components: {
    ContactItem,
  },
})
export default class ContactPanel extends Vue {
  private contacts = [
    {
      icon: 'static/pngs/contact/ic-email.png',
      title: 'EMAIL',
      content: 'btlee86@gmail.com',
      link: 'mailto://btlee86@gmail.com',
    },
    {
      icon: 'static/pngs/contact/ic-website.png',
      title: 'WEBSITE',
      content: 'www.artbleed.com',
      link: 'https://www.artbleed.com',
    },
    {
      icon: 'static/pngs/contact/ic-artstation.png',
      title: 'ARTSTATION',
      content: 'Bleed',
      link: 'https://www.google.com',
    },
    {
      icon: 'static/pngs/contact/ic-deviantart.png',
      title: 'DEVIANT ART',
      content: 'blee-d',
      link: 'https://www.google.com',
    },
    {
      icon: 'static/pngs/contact/ic-facebook.png',
      title: 'FACEBOOK',
      content: 'Bryan Lee',
      link: 'https://www.google.com',
    },
    {
      icon: 'static/pngs/contact/ic-behance.png',
      title: 'BEHANCE',
      content: 'Bryan Lee',
      link: 'https://www.google.com',
    },
  ];
}
</script>
<style lang="stylus" scoped>
.contact-panel {
  background-color: $blue-grey-8;
  font-size: 12px;
}
</style>
